<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${orderProduct.address.consignee} ${addressDetail}`" :tel="orderProduct.address.mobile" v-if="orderProduct.address" :editable="false" />

    <!-- 商品卡片 -->
    <van-card
        :title="orderProduct.product_product.name"
        :thumb="orderProduct.product_product.thumbs_text"
        :num="orderProduct.pronum"
        @click-thumb="toProductInfo(orderProduct.proid)"
    >
        <template #title>
          <div class="title">{{orderProduct.product_product.name}}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="orderProduct.prop_list">
            <van-tag class="tag" type="danger" v-for="(prop,index) in orderProduct.prop_list" :key="index">{{prop}}</van-tag>
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
            <div class="price">单价：￥{{orderProduct.price}}</div>
        </template>

        <template #price>
            <div class="price">合计：￥{{orderProduct.total}}</div>
        </template>
    </van-card>
    <van-form @submit="submit">
        <van-cell-group inset>
            <van-field
                v-model="comment"
                rows="2"
                autosize
                label="评论内容"
                type="textarea"
                maxlength="120"
                placeholder="请输入评论内容"
                show-word-limit
                :rules="[{required: true, message: '请输入评论内容'}]"
                :readonly="orderProduct.status == '2' ? false : true"
                name="comment"
            />

            <van-field label="评分" name="rate">
                <template #input>
                    <van-rate 
                        v-model="rate"
                        :readonly="orderProduct.status == '2' ? false : true"
                    />
                </template>
            </van-field>

            <van-field name="thumbs" label="评价图片" v-if="orderProduct.status == '2'">
                <!-- 插槽重新输入框部分，用文件上传来代替 -->
                <template #input>
                    <van-uploader 
                        v-model="thumbs" 
                        multiple 
                        :max-count="9" 
                        :readonly="orderProduct.status == '2' ? false : true" 
                        :deletable="orderProduct.status == '2' ? true : false"
                    />
                    
                </template>
            </van-field>
            <van-cell title="评论图片" v-else>
                <template #label>
                    <van-image
                        width="100"
                        height="100"
                        :src="img"
                        v-for="(img,index) in imgList"
                        :key="index"
                    />
                </template>
            </van-cell>
        </van-cell-group>
        
        <div v-if="orderProduct.status == '2'" style="width:50%;margin:2em auto;">
            <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script setup>
    const {proxy} = getCurrentInstance()

    const loading = ref(false)
    const comment = ref('')
    const rate = ref('')
    const thumbs = ref([])

    const id = proxy.$route.query.id
    const orderProduct = ref({})
    const addressDetail = ref('')
    const imgList = ref([]);
    onBeforeMount(()=>{
        orderInfo()
    })
    const orderInfo = async()=>{
        let result = await proxy.$GET({url:'/order/info',params:{id}})
        if(result.code==0)proxy.$router.push('/order')
        orderProduct.value = result.data
        const {province_text,city_text,district_text,address} = orderProduct.value.address
        addressDetail.value = [province_text,city_text,district_text,address].filter(e=>e.trim()).join('-')
        comment.value = orderProduct.value.comment??''
        rate.value = orderProduct.value.rate??'0'
        let imgs = orderProduct.value.thumbs
        if(imgs){
            imgList.value = imgs.split('|')
        }
    }
    const toProductInfo = (id)=>proxy.$router.push(`/product/info?id=${id}`)
    const submit = async(values)=>{
        let params = {...values}
        params.thumbs = params.thumbs.map(thumb=>thumb.file)
        params.id = id
        let result = await proxy.$UPLOAD({
            url:'/order/comment',
            params
        })
        if(result.code)
        {
            showSuccessToast(result.msg)
            orderInfo()
        }else{
            showFailToast(result.msg)
        }
    }
</script>

<style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>

<style>
  .OrderCode{
    word-wrap: normal;
  }
</style>